<template>
  <div class="search-goods">
    <div class="flex">
      <div class="flex-item">
        <el-input size="medium" v-model="form.nickName" placeholder="用户昵称"></el-input>
      </div>
      <div class="flex-item">
        <el-input size="medium" type="number" v-model="form.mobile" placeholder="手机号"></el-input>
      </div>
      <div class="flex-item">
        <el-input size="medium" v-model="form.province" placeholder="所属省"></el-input>
      </div>
      <div class="flex-item2" style="text-align: right">
        <el-date-picker
          v-model="date"
          size="medium"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="注册时间"
          end-placeholder="注册时间"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>
      <div class="flex-item">
        <el-input size="medium" v-model="form.city" placeholder="所属市"></el-input>
      </div>
    </div>
    <div class="flex">
      <div class="flex-item">
        <el-select size="medium" v-model="form.role" placeholder="是否为推广员">
          <el-option label="是" :value="0"></el-option>
          <el-option label="否" :value="1"></el-option>
        </el-select>
      </div>
      <div class="flex-item flex">
        <el-input size="medium" v-model="form.purchaseTimes1" placeholder="购买次数"></el-input>
        <div class="kong">-</div>
        <el-input size="medium" v-model="form.purchaseTimes2" placeholder="购买次数"></el-input>
      </div>
      <!-- <div class="flex-item flex">
        <el-input size="medium" v-model="form.madeBy7" placeholder="退款次数"></el-input>
        <div class="kong">-</div>
        <el-input size="medium" v-model="form.madeBy8" placeholder="退款次数"></el-input>
      </div> -->
      <div class="flex-item2 flex">
        <el-input size="medium" v-model="form.totalAmount1" placeholder="成交金额"></el-input>
        <div class="kong">-</div>
        <el-input size="medium" v-model="form.totalAmount2" placeholder="成交金额"></el-input>
      </div>
      <div class="flex-item">
        <el-button type="warning" size="small" plain icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" size="small" plain icon="el-icon-tickets" @click="output">导出表格</el-button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { datePickerOptions } from '@/libs/time'

export default {
  name: 'search-user',
  data() {
    return {
      date: '',
      form: {
        nickName: '',
        mobile: '',
        province: '',
        city: '',
        role: '',
        date1: '',
        date2: '',
        purchaseTimes1:'',
        purchaseTimes2:'',
        totalAmount1: '',
        totalAmount2: ''
      },
      pickerOptions: datePickerOptions
    }
  },
  created() {
  },
  methods: {
    search() {
      this.$emit('search',this.form)
    },
    add() {
      this.$emit('add')
    },
    output() {
      this.$emit('output')
    }
  },
  watch: {
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin.styl'
.el-range-editor
  width 300px
.flex
  flex-row()
  margin 10px 0
  .flex-item
    flex 1
    flex-row()
    // width 170px
    margin-right 15px
    .el-select
      width 100%
  .flex-item2
    margin-right 15px
    width 300px
    display flex
    flex-row()
.kong
  padding 0 3px
</style>
